<template>
    <div id="intelligenceInquiry_add">
        <div class="top">
            <van-nav-bar
                title="查新申请"
                left-arrow
                @click-left="$router.push('/intelligenceInquiry')"
            />
        </div>

        <van-form
            label-width="auto"
            :colon="true"
            label-align="left"
            scroll-to-error
            @submit="onSubmit"
            input-align="right"
        >
            <van-field
            class="mandatory"
                v-model="form.chineseName"
                name="chineseName"
                label="查新中文名"
                :rules="[{ required: true, message: '不能为空' }]"
                placeholder="请输入查新中文名"
            />
            <van-field
                v-model="form.englishName"
                name="englishName"
                label="查新英文名"
                placeholder="请输入查新英文名"
            />
            <van-field
                v-model="form.term"
                name="term"
                label="中文检索词"
                placeholder="请输入中文检索"
            />
            <van-field
                v-model="form.gist"
                name="gist"
                class="mandatory"
                label="科学技术要点"
                :rules="[{ required: true, message: '不能为空' }]"
                placeholder="请输入科学技术要点"
            />
            <van-field
                v-model="form.noveltyRetrievalPoint"
                name="noveltyRetrievalPoint"
                label="查新点"
                class="mandatory"
                :rules="[{ required: true, message: '不能为空' }]"
                placeholder="请输入查新点"
            />
            <van-field
                name="purpose"
                label="查新目的"
                class="mandatory"
                :rules="[{ required: true, message: '不能为空' }]"
                readonly
                clickable
                :value="form.purpose.text"
                placeholder="点击选择"
                right-icon="arrow"
                @click="showPurpose = true"
            >
            </van-field>

            <van-popup v-model="showPurpose" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="noveltySearchPurpose"
                    @confirm="purposeConfirm"
                    @cancel="showPurpose = false"
                />
            </van-popup>
            <van-field
                name="otherExplain"
                label="查新目的其他说明"
                v-show="
                    form.purpose.text ? form.purpose.text.includes('其他') : ''
                "
                v-model="form.otherExplain"
                placeholder="查新目的其他说明"
            >
            </van-field>
            <van-field
                name="category"
                label="服务查新类别"
                :rules="[{ required: true, message: '不能为空' }]"
                clickable
                class="mandatory"
                :value="form.category.text"
                placeholder="点击选择类别"
                @click="showTypeList"
                right-icon="arrow"
            />
            <van-popup v-model="showType" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="serviceNoveltySearchType"
                    @confirm="typeConfirm"
                    @cancel="showType = false"
                />
            </van-popup>
            <van-field
                v-model="form.ifUrgent"
                name="ifUrgent"
                label="是否加急"
                v-show="
                    form.purpose.text != '专有技术查新' && form.purpose.text
                "
            >
                <template #input>
                    <van-radio-group
                        v-model="form.ifUrgent"
                        direction="horizontal"
                    >
                        <van-radio name="27-Y">是</van-radio>
                        <van-radio name="27-N">否</van-radio>
                    </van-radio-group>
                    <div>
                        <div
                            v-for="(item, index) in form.urgentReason"
                            :key="index"
                        >
                            {{ item }}
                        </div>
                    </div>
                </template>
            </van-field>
            <!-- 新增  1114-->
     
        <popup-select
            name="completedDays"
            class="mandatory"
            label="加急完成天数"
            :rules="[{ required: true, message: '不能为空' }]"
            placeholder="请选择"
            :options="relationData.whetherOptions"
            :default-props="{
              label: 'name',
              value: 'code',
            }"
                v-model="form.completedDays"
                v-if="form.ifUrgent == '27-Y'? true :false"
            />

            <van-field
                v-show="
                    form.purpose.text != '专有技术查新' &&
                    form.purpose.text &&
                    form.ifUrgent == '27-Y'
                "
                v-model="form.urgentCause"
                name="urgentCause"
                label="加急原因"
                placeholder="请输入加急原因"
            />
            <van-field
                v-model="form.consignorW"
                placeholder="请输入委托人"
                :rules="[{ required: true, message: '不能为空' }]"
                name="consignorW"
                class="mandatory"
                label="委托人"

            />
            <van-field
                label="委托日期"
                readonly
                clickable
                name="entrustDate"
                :value="form.entrustDate"
                placeholder="点击选择日期"
                @click="showCalendar = true"
                right-icon="arrow"
            />
            <van-calendar v-model="showCalendar"  @confirm="clientTimeConfirm" />
            <van-field            
                v-model="form.orgNameW"
                name="orgNameW"
                label="法人机构名称(外部)"
                clickable
                placeholder="点击输入/选择法人机构名称"
                right-icon="arrow"
                @click-right-icon="showLegalEntityName = true"
            />
            <van-popup v-model="showLegalEntityName" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="legalEntityName"
                    value-key="name"
                    @confirm="LegalEntityNameConfirm"
                    @cancel="showLegalEntityName = false"
                />
            </van-popup>
            <van-field
                v-model="form.phone"
                placeholder="请输入电话"
                name="phone"
                label="电话"
                class="mandatory"
                :rules="[
                    {
                        validator: (val) =>
                        val
                            ? /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
                                val
                            )
                            : true,
                        message: '请输入正确的电话号码',
                    },
                    { required: true, message: '不能为空' }
                    ]"
            />
            <van-field
                v-model="form.email"
                name="email"
                placeholder="请输入邮件"
                class="mandatory"
                label="邮件"
                :rules="[{ required: true, message: '不能为空' }]"
            />
            <van-field
                v-model="form.postalCode"
                name="postalCode"
                label="邮政编码"
                :rules="[{ required: true, message: '不能为空' }]"
                placeholder="请输入邮件编码"
                class="mandatory"
            />
            <van-field
                v-model="form.mailingAdd"
                name="mailingAdd"
                label="通信地址"
                class="mandatory"
                placeholder="请输入通信地址"
                :rules="[{ required: true, message: '不能为空' }]"
            />
            <van-field
                v-model="form.numberOfReports"
                name="numberOfReports"
                type="number"
                label="所需报告份数"
                class="mandatory"
                placeholder="请输入所需报告份数"
                :rules="[{ required: true, message: '不能为空' }]"
            />
            <!-- <van-field
                name="signContract"
                v-show="showCoor"
                label="是否签订开口合同"
                :rules="[{ required: true, message: '不能为空' }]"
            >
                <template #input>
                    <van-radio-group
                        v-model="form.signContract"
                        direction="horizontal"
                    >
                        <van-radio name="27-Y">是</van-radio>
                        <van-radio name="27-N">否</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field
                v-show="form.signContract == '27-Y' && showCoor"
                v-model="form.contName"            
                name="contName"
                label="合同名称"
            />
            <van-field
                v-show="form.signContract == '27-Y' && showCoor"
                v-model="form.conNum"     
                name="conNum"
                label="合同编号"
            /> -->

            <van-field style="display: block" name="资料列表" label="资料列表">
                <template #input>
                    <div class="list">
                        <div
                            v-for="(item, index) in dataList"
                            :class="
                                item.checked == 1
                                    ? 'active-item'
                                    : 'datalist-item'
                            "
                            :key="index"
                            @click="
                                item.checked == 1
                                    ? (item.checked = 0)
                                    : (item.checked = 1)
                            "
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </template>
            </van-field>
            <van-field
                v-model="form.otherForm"
                name="otherForm"
                v-if="dataList[dataList.length - 1].checked == true"
                label="资料列表其他注明"
                placeholder="资料列表其他注明"
            />
            <!-- <van-field
                v-model="form.dataContent"
                name="dataContent"
                label="资料内容"
                placeholder="请输入资料内容"
            /> -->
            <van-field name="uploader" label="资料内容" placeholder="请选择">
                <template #input>
                    <van-uploader
                        accept=""
                        multiple
                        v-model="fileList"
                        upload-text="请选择"
                    >
                        <van-icon color="#333" name="arrow" />
                    </van-uploader>
                </template>
            </van-field>
            <van-field
                v-model="form.copies"
                placeholder="请输入资料份数"
                name="copies"
                label="资料份数"
            />
            <!-- <van-field
                :value="form.securityClassification.text"
                name="securityClassification"
                label="密级"
                readonly
                clickable
                right-icon="arrow"
                placeholder="请选择"
                @click="showClassification = true"
            /> -->
            <van-popup v-model="showClassification" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="classification"
                    @confirm="classificationConfirm"
                    @cancel="showClassification = false"
                />
            </van-popup>
            <div class="submit">
                <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    :loading="loading"
                    :disabled="loading"
                    >提交申请</van-button
                >
            </div>
        </van-form>
    </div>
</template>
<script>
import { Toast } from "vant";
import api from "../../http/api";
export default {
    data() {
        return {
            timer: null,
            loading: false,
            showCoor: false,
            fileList: [],
            minDate:new Date(2008,0,1),
            form: {
                urgentToCompleteDays:'',
                chineseName: "",
                englishName: "",
                term: "",
                gist: "",
                noveltyRetrievalPoint: "",
                purpose: "",
                otherPurpose: "",
                category: "",
                ifUrgent: "",
                urgentCause: "",
                consignorW: "",
                entrustDate: "",
                orgNameW: "",
                orgNameCode:'',//code // 修改项
                phone: "",
                email: "",
                postalCode: "",
                mailingAdd: "",
                signContract: "",
                contName: "",
                conNum: "",
                otherForm: "",
                dataContent: "",
                copies: "",
                securityClassification: "",
                completedDays:'',//加急天数
            numberOfReports:'1',//报告份数
            },
        
            relationData:{
                whetherOptions:[
                    {
                        name:'3天',
                        id:'1',
                        code:'JJWCTS-3'
                    },
                    {
                        name:'5天',
                        id:'1',
                        code:'JJWCTS-5'
                    },
                ]
            },
            // 查新目的
            noveltySearchPurpose: [
                {
                    text: "立项查新",
                    value: "CXMD-LXCX",
                    child: [
                        {
                            text: "国内查新",
                            value: "LXCX-GLCX",
                        },
                        {
                            text: "国内外查新",
                            value: "LXCX-GNECX",
                        },
                    ],
                },
                {
                    text: "成果查新",
                    value: "CXMD-CGCX",
                    child: [
                        {
                            text: "国内查新",
                            value: "CGCX-GNCX",
                        },
                        {
                            text: "国内外查新",
                            value: "CGCX-GNWCX",
                        },
                    ],
                },
                {
                    text: "专有技术查新",
                    value: "CXMD-ZYJSCX",
                    child: [
                        {
                            text: "国内查新",
                            value: "LXCX-GLCX",
                        },
                        {
                            text: "国内外查新",
                            value: "LXCX-GNECX",
                        },
                    ],
                },
                {
                    text: "其他(请注明)",
                    value: "CXMD-QT",
                    child: [
                        {
                            text: "国内查新",
                            value: "QT-GNCX",
                        },
                        {
                            text: "国内外查新",
                            value: "QT-GNWCX",
                        },
                    ],
                },
            ],
            showPurpose: false,
            showPurpose1: false,
            //服务查新类别
            showType: false,
            serviceNoveltySearchType: [],
            // 委托日期
            showCalendar: false,
            // 法人机构名称
            showLegalEntityName: false,
            legalEntityName: [],
            // 密级
            classification: [
                {
                    text: "内部公开",
                    value: "MJ-NBGK",
                },
                {
                    text: "工作秘密",
                    value: "MJ-GZMM",
                },
                {
                    text: "普通商密",
                    value: "MJ-PTSM",
                },
                {
                    text: "核心商密",
                    value: "MJ-HXSM",
                },
            ],
            showClassification: false,
            // 资料列表
            dataList: [
                { name: "开题报告", key: "openingReport", checked: 0 },
                { name: "研制报告", key: "researchReport", checked: 0 },
                { name: "总结报告", key: "finalReport", checked: 0 },
                { name: "成果申报表", key: "declarationForm", checked: 0 },
                { name: "专利说明书", key: "patentSpecification", checked: 0 },
                { name: "产品样本", key: "catalogue", checked: 0 },
                { name: "监测报告", key: "testReport", checked: 0 },
                { name: "用户报告", key: "userReport", checked: 0 },
                { name: "技术报告", key: "technicalReport", checked: 0 },
                { name: "可行性报告", key: "feasibilityReport", checked: 0 },
                { name: "报奖材料", key: "winMaterial", checked: 0 },
                { name: "其他请注明", key: "othersSpecify", checked: 0 },
            ],
        };
    },
    created() {
        this.getCorporation();
    },
    mounted() {
        this.form.entrustDate = this.getNowDate()
    },
    watch: {
        "form.signContract"(val) {
            // console.log("是否前顶顶开口合同", val);
            if (val == "27-Y") {
                // .getCCoorperation({ orgName: this.form.orgNameW })
                api.intelligenceInquiry
                    .getCCoorperation({ orgName: this.form.orgNameCode }) // 修改项
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            this.form.contName = res.data.data[0].contName;
                            this.form.conNum = res.data.data[0].contNum;
                        }
                    });
            }
        },
        "form.ifUrgent":{
            handler(v,o){
                console.log('v,o :>> ', v,o);
            }
        },
        'form.completedDays':{
            handler(v,o){
                console.log('v,o :>> ', v,o);
            }
        },
        // 机构名称是否存在于列表中
        "form.orgNameW"(val) {
            const state = this.legalEntityName.find((item) => item.name == val);
            if (state) {
                this.showCoor = true;
            } else {
                this.showCoor = false;
                this.form.signContract = "";
                this.form.contName = "";
                this.form.conNum = "";
            }
        },
    },
    methods: {
        getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`
      return NOW_MONTHS_AGO
    },
        showTypeList() {
            if (this.form.purpose.text) {
                this.showType = true;
            } else {
                Toast.fail("请选择查新目的");
            }
        },
        showDay() {
            if (this.form.theUrgentDays) {
                this.showType = true;
            } else {
                Toast.fail("请选择查新目的");
            }
        },
        // 获取法人机构名称
        getCorporation() {
            api.intelligenceInquiry.getCorporation().then((res) => {
                // console.log(res);
                if (res.data.code == 200) {
                    this.legalEntityName = res.data.data;
                }
            });
        },
        // 提交
        async onSubmit() {
            console.log(this.fileList);
            this.loading = true;
            let formData = new FormData();
            this.fileList.forEach((item) => {
                formData.append("file", item.file);
            });
            let res = await api.file.upload(formData);
            // console.log(res);
            if (res.data.code == 200) {
                let obj = {};
                this.dataList.forEach((item) => {
                    obj[item.key] = item.checked;
                });
                const data = {
                    ...this.form,
                    purpose: this.form.purpose.value,
                    category: this.form.category.value,
                    securityClassification:
                    this.form.securityClassification.value,
                    ...obj,
                    // orgNameW: this.form.orgNameW.name,
                    orgNameW: this.form.orgNameW,// 修改项
                    orgNameCode: this.form.orgNameCode,// 修改项
                    dataContent: res.data.data,
                };
                // console.log("流程数据", data);
                api.intelligenceInquiry.addIntelligence(data).then((resp) => {
                    // console.log("流程发起", resp);
                    this.loading = false;
                    if (resp.data.code == 200) {
                        // console.log(111);
                        Toast.success("提交成功");
                        setTimeout(() => {
                            this.$router.push("/intelligenceInquiry");
                        }, 800);
                    } else {
                        Toast.fail("提交失败");
                    }
                });
            }
        },
        // 查新目的
        purposeConfirm(value) {
       
            if(value.text == "专有技术查新"){
                Toast.fail("因保密原因,专有技术请通过线下发起");
                return
            }
            this.showPurpose = false
            this.form.purpose = value;
            this.serviceNoveltySearchType = value.child;
            if (this.form.purpose.text == "专有技术查新") {
                this.form.ifUrgent = "";
                this.form.urgentCause = "";
            }
           
        },

        // 服务查新类别
        typeConfirm(value) {
            this.form.category = value;
            this.showType = false;
        },
        // 委托日期
        clientTimeConfirm(date) {
            this.form.entrustDate = `${date.getFullYear()}-${
                date.getMonth() + 1
            }-${date.getDate()}`;
            this.showCalendar = false;
        },
        // 法人机构名称
        LegalEntityNameConfirm(value) {
            this.form.orgNameW = value.name;
            this.form.orgNameCode = value.code;//修改项
            this.showLegalEntityName = false;
        },
        // 密级
        classificationConfirm(value) {
            this.form.securityClassification = value;
            this.showClassification = false;
        },
    },
};
</script>

<style lang="less" scoped>
#intelligenceInquiry_add {
    width: 100vw;
    min-height: calc(100vh - 64px);
    background-color: #f5f5f5;
    padding-bottom: 64px;
    padding-top: 51px;
    box-sizing: border-box;
    .top {
        position: fixed;
        width: 100%;
        top: 0;
        overflow: hidden;
        background-color: white;
        z-index: 1;
    }
    .van-form {
        .mandatory{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 14px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
        /deep/ .van-checkbox--horizontal {
            padding: 10px;
            margin: 0;
        }
        /deep/ .van-radio--horizontal {
            overflow: visible;
        }
        .list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 150px;
        }
        .datalist-item {
            width: 109px;
            height: 32px;
            line-height: 32px;
            background: #f5f5f5;
            border-radius: 16px;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid transparent;
        }
        .active-item {
            width: 109px;
            height: 32px;
            line-height: 32px;
            background: rgba(14, 134, 209, 0.2);
            border: 1px solid #0e86d1;
            border-radius: 16px;
            font-family: "ABeeZee";
            font-style: normal;
            font-weight: 400;
            box-sizing: border-box;
            font-size: 14px;
            /* identical to box height, or 143% */

            text-align: center;
            letter-spacing: -0.24px;

            color: #0e86d1;
            z-index: 1;
        }
    }
    .submit {
        padding: 10px;
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 64px;
        box-sizing: border-box;
        background-color: #f5f5f5;
        /deep/ .van-button--block {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 10px 143.5px;
            gap: 10px;
            background: #0e86d1;
            border-radius: 4px;
        }
    }
}
/deep/ .van-ellipsis {
    overflow: visible;
}
/deep/ .van-nav-bar__left {
    padding: 10px;
}
/deep/ .van-ellipsis {
    overflow: visible;
}
/deep/ .van-nav-bar__content {
    height: 51px;
}
/deep/ .van-nav-bar__title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    /* identical to box height, or 111% */

    text-align: center;
    letter-spacing: -0.24px;

    color: #333333;
}
/deep/ .van-nav-bar .van-icon {
    /* 文字颜色3 */

    color: #999999;
}
/deep/ .van-field__control::-webkit-input-placeholder {
    text-align: right;
}
// /deep/ .van-uploader__file-name {
//     overflow: hidden;
// }
// /deep/ .van-uploader__input-wrapper {
//     display: flex;
//     align-items: center;
// }
// /deep/ .van-uploader__file-icon {
//     display: none;
// }
// /deep/ .van-uploader__file {
//     width: auto;
//     height: auto;
//     background-color: transparent;
// }
/deep/ .van-radio-group--horizontal {
    justify-content: flex-end;
    width: 100%;
}
/deep/ .van-uploader__file-name {
    overflow: hidden;
    text-align: right;
}
/deep/ .van-uploader__input-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/deep/ .van-uploader__file-icon {
    display: none;
}
/deep/ .van-uploader__file {
    width: auto;
    height: auto;
    background-color: transparent;
}
/deep/ .van-field__value {
    overflow: hidden;
    .van-field__error-message{
            text-align: right !important;
        }
}
/deep/ .van-uploader__preview,
/deep/ .van-uploader,
/deep/ .van-uploader__input-wrapper {
    width: 100%;
}
/deep/ .van-uploader__preview {
    margin: 0;
}
</style>